/**
 * Created by lipeng on 2019/5/5.
 */

new Vue({
  el: '#app',
  data: {
    msg: "Hello Word",
    websitList: [
      {
        active: 1,
        icon: "icon-zhuanshudingzhi",
        title: "专属功能",
        desc: "从用户需求出发，凸显企业特性的UI界面设计，深度整合企业的各类业务系统。"
      },
      {
        active: 0,
        icon: "icon-kuozhanxingqiang",
        title: "扩展性强",
        desc: "完好的主流借口，互联互通性强，提供可供编辑的源代码，系统迭代升级更容易。"
      },
      {
        active: 0,
        icon: "icon-chaoqiangjianrongxing",
        title: "超强兼容性",
        desc: "友好的浏览器兼容性，适应各大主流浏览器，结合SEO优化布局，提升网站排名，抢占市场。"
      },
      {
        active: 0,
        icon: "icon-yizhanguanli",
        title: "一站管理",
        desc: "“PC+WEB+微信+APP”四网合一，数据同步，一站式管理解决方案。"
      },
    ],
    webappList: [
      {
        active: 0,
        icon: "icon-kaifa",
        title: "开发先进技术",
        desc: "采用前沿移动网页设计标准，与现有网页技术重新整合，高性能反应，快速打开网站，确保GPRS、4G、WIFI环境畅通访问,前端全静态页面，提高访问速度。"
      },
      {
        active: 0,
        icon: "icon-yizhanguanli",
        title: "功能延展性强",
        desc: "一键拨号、一键分享、一键地图、一键留言、移动优惠券、移动商城、移动购物......百变功能灵活组合，实时互化沟通，促进流量转化。"
      },
      {
        active: 0,
        icon: "icon-wanmeijianrong",
        title: "完美兼容主流系统",
        desc: "手机站的定制开发，适配全部主流智能手机和各种不同屏幕的机型，一次开发即可投入使用，打造出弹性伸缩，重点突出。"
      },
      {
        active: 0,
        icon: "icon-yizhanguanli",
        title: "改善用户体验",
        desc: "手机站的定制开发，适配全部主流智能手机和各种不同屏幕的机型，一次开发即可投入使用，打造出弹性伸缩，重点突出。"
      },
    ],
    ebuyList:[
      {
        title:'电子商务系统定制开发',
        titleDesc:'深度定制开发“O2O、B2B、B2C、C2C、B2B2C、分销”等多种电商模式',
        icon:"icon-kuozhanxingqiang",
        name:'多终端数据一体化',
        nameEn:'Multi terminal data integration',
        desc:'移动、PC多终端数据同步，高效统计会员、商品、订单、库存等经营数据。会员数据全掌控，支撑精细化运营。'
      },
      {
        title:'电子商务系统定制开发',
        titleDesc:'深度定制开发“O2O、B2B、B2C、C2C、B2B2C、分销”等多种电商模式',
        icon:"icon-kuozhanxingqiang",
        name:'精准的商品搜索',
        nameEn:'Precise commodity search',
        desc:'支持辅助性商品关键词的普通/高级搜索，多维度筛选商品，帮助用户快速查找目标商品，提升购物效率。'
      },
      {
        title:'电子商务系统定制开发',
        titleDesc:'深度定制开发“O2O、B2B、B2C、C2C、B2B2C、分销”等多种电商模式',
        icon:"icon-kuozhanxingqiang",
        name:'便捷的支付方式',
        nameEn:'A convenient way of payment',
        desc:'货到付款、微信支付、支付宝、银联等多种支付方式，满足不同用户的支付需求，促进交易安全快捷完成。'
      },
      {
        title:'电子商务系统定制开发',
        titleDesc:'深度定制开发“O2O、B2B、B2C、C2C、B2B2C、分销”等多种电商模式',
        icon:"icon-kuozhanxingqiang",
        name:'多终端数据一体化',
        nameEn:'多终端数据一体化',
        desc:'移动、PC多终端数据同步，高效统计会员、商品、订单、库存等经营数据。会员数据全掌控，支撑精细化运营。'
      },
    ],
    appList:[
      {
        active: 0,
        title:'专业的UI交互体验',
        titleEn:'Professional UI interactive experience',
        desc:'专业的项目流程梳理，让APP搭建模式及功能需求更加清晰，完善的产品架构原型交互设计，让用户在移动端的操作体验更便捷，打造高颜值高性能APP应用。'
      },
      {
        active: 0,
        title:'支持多平台对接',
        titleEn:'Support multi platform docking',
        desc:'与企业原有系统接口打通，业务系统、客服系统、生产系统、B2C商城等相关联，应用各种营销活动，实现大数据集成，给用户带来便捷体验，助力企业全面布局。'
      },
      {
        active: 0,
        title:'极速浏览增强粘性',
        titleEn:'Fast browsing of enhanced stickiness',
        desc:'对不同手机终端进行大量测试，确保较高的兼容性以支持不同手机终端极速浏览；本地运行，可以不依赖于网络，灵活地访问硬件和底层数据，为用户提供良好的使用体验。'
      },
    ]
  },
  created: function () {

  },
  mounted: function () {
    this.initSwiper();
  },
  methods: {
    websitOver: function (index) {
      for (var i = 0; i < this.websitList.length; i++) {
        this.websitList[i].active = 0;
      }
      this.websitList[index].active = 1;
    },
    initSwiper: function () {
      var self = this;
      var swiperWebapp = new Swiper('#orderWebapp', {
        slidesPerView: 3,
        spaceBetween: 0,
        loop: true,
        init: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        navigation: {
          nextEl: '.m-next',
          prevEl: '.m-prev'
        },
        breakpoints: {
          1024: {
            slidesPerView: 3,
            spaceBetween: 0,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i=0;i<self.webappList.length;i++){
              self.webappList[i].active = 0;
            }
            self.webappList[this.realIndex].active = 1;
          },
        },
      });

      var orderBuy = new Swiper('#orderBuy', {
        loop: true,
//    autoplay:true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
      });

      var orderApp = new Swiper('#orderApp', {
        slidesPerView: 2,
        spaceBetween: 100,
        loop: true,
        // init: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        navigation: {
          nextEl: '.m-next',
          prevEl: '.m-prev',
        },
        breakpoints: {
          1024: {
            slidesPerView: 2,
            spaceBetween: 60,
          },
          768: {
            slidesPerView: 1,
            spaceBetween: 0,
          },
        },
        on: {
          slideChangeTransitionEnd: function () {
            for (var i=0;i<self.appList.length;i++){
              self.appList[i].active = 0;
            }
            self.appList[this.realIndex].active = 1;
          },
        },
      });
    },

  }
});